<template>
  <div class="label-type">
    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      title="改标签"
      width="800px"
      @close="close"
    >
      <div v-loading="dialogLoading">
        <ul class="info-avatar">
          <li class="avatar">
            <img v-if="vipDetail.customer.headImg" :src="vipDetail.customer.headImg" alt>
          </li>
          <li
            class="name"
          >{{ vipDetail.member.name || vipDetail.customer.nickName }}
          </li>
        </ul>
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="70px"
          size="small"
        >
          <el-form-item prop="type" label="方式">
            <el-radio v-model="form.type" label="add" @change="getTagList">添加标签</el-radio>
            <el-radio v-model="form.type" label="del" @change="getTagList">移除标签</el-radio>
          </el-form-item>
          <el-form-item prop="labelGroup" label="标签">
            <div v-if="!labelGroup.length">
              <el-alert
                :title="labelWarningTitle"
                :closable="false"
                type="warning"
                show-icon
              />
            </div>
            <div v-else>
              <div v-for="(item, index) in labelGroup" :key="index">
                <el-form-item>
                  <div style="margin: 0 0 10px 5px">{{ item.tagGroup }}</div>
                  <el-button
                    v-for="v in item.tags"
                    :key="v.id"
                    :type="form.tagIds.includes(v.id)?'primary':''"
                    round
                    @click="labelListSearch(v.tagName,v.id)"
                  >{{ v.tagName }}
                  </el-button>
                </el-form-item>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="说明" prop="remark">
            <el-input
              v-model.trim="form.remark"
              :rows="4"
              type="textarea"
              placeholder="请输入修改说明..."
            />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" round @click="hide">取 消</el-button>
        <el-button size="medium" round type="primary" @click="submit">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getTagsList, setMemberTag } from '@/api/vip'
export default {
  props: {
    vipDetail: {
      type: Object,
      require: true,
      default: null
    }
  },
  data() {
    return {
      // 配置
      rules: {
        type: {
          required: true
        },
        labelGroup: {
          required: true
        }
      },
      // 状态
      dialogVisible: false, // 弹窗显示状态
      dialogLoading: false, // 加载动画
      labelWarningTitle: '',
      // 数据
      form: {
        remove: false,
        type: 'add',
        tagIds: [], // 选中标签ID
        remark: null
      }, // 表单内容
      labelGroup: [] // 标签组
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
    this.getTagList()
  },
  methods: {
    /**
     * 数据组
     */
    // 获取所有标签
    getTagList() {
      this.labelGroup = []
      this.form.tagIds = []
      if (this.form.type === 'add') {
        this.labelWarningTitle = '标签库为空'
      } else if (this.form.type === 'del') {
        this.labelWarningTitle = '这个会员暂时没有可移除的标签'
      }
      getTagsList().then((res) => {
        // 添加过滤已有标签，删除显示已有标签
        res.data.forEach((item1, index1) => {
          res.data[index1].tags = item1.tags.filter(item2 => {
            if (this.form.type === 'add') {
              return !this.vipDetail.tags.some(item3 => {
                return item3.id === item2.id
              })
            } else if (this.form.type === 'del') {
              return this.vipDetail.tags.some(item3 => {
                return item3.id === item2.id
              })
            }
          })
        })
        res.data.forEach(item1 => {
          if (item1.tags.length) this.labelGroup.push(item1)
        })
      })
    },
    /**
     * 按钮组
     */
    submit() {
      this.dialogLoading = true
      if (this.form.tagIds.length === 0) {
        this.$notify({
          title: '警告',
          message: '请选择添加/删除的标签',
          type: 'warning',
          duration: 2000,
          offset: 40
        })
      } else {
        // 功能类型处理
        this.form.remove = this.form.type === 'del'
        delete this.form.type
        setMemberTag({ memberId: this.vipDetail.member.id, ...this.form }).then(() => {
          this.$notify({
            title: '成功',
            message: '修改成功',
            type: 'success',
            duration: 2000,
            offset: 40
          })
          this.resolve()
          this.hide()
        }).finally(() => {
          this.dialogLoading = false
        })
      }
    },
    /**
     * 状态组
     */
    open() {
      this.show()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    show() {
      this.dialogVisible = true
      this.getTagList()
    },

    hide() {
      this.resolve = null
      this.reject = null
      this.form = {
        remove: false,
        type: 'add',
        tagIds: [], // 选中标签ID
        remark: null
      }
      this.dialogVisible = false
    },

    close() {
      this.dialogLoading = false
      this.$refs.form.resetFields()
    },
    /**
     * 方法组
     */
    // 获得选中标签id数组
    labelListSearch(name, index) {
      if (this.form.tagIds.includes(index)) {
        this.form.tagIds.splice(this.form.tagIds.indexOf(index), 1)
      } else {
        this.form.tagIds.push(index)
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.label-type{
  display: flex;
  .info-avatar {
    height: 40px;
    margin: 15px 10px;

    li {
      float: left;
      margin-right: 10px;
    }

    .avatar {
      overflow: hidden;
      display: inline-block;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid #e7e7e7;
    }

    .name {
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      font-weight: bold;
      color: $dark-font-color;
    }
  }
  .label-button {
    margin: 10px 10px;
    flex: 1;
  }
}
</style>
